<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="utf-8">
    <title>java兴趣社|首页</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Uhost is Creative Website Template" name="description">
    <meta content="" name="keywords">
    <meta content="" name="author">

    <!--[if lt IE 9]>
    <script src="/user/js/html5shiv.js"></script>
    <![endif]-->

    <!-- CSS Files
    ================================================== -->
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
    <link href="/user/css/bootstrap-grid.min.css" rel="stylesheet" type="text/css">
    <link href="/user/css/bootstrap-reboot.min.css" rel="stylesheet" type="text/css">
    <link href="/user/css/animate.css" rel="stylesheet" type="text/css">
    <link href="/user/css/owl.carousel.css" rel="stylesheet" type="text/css">
    <link href="/user/css/owl.theme.css" rel="stylesheet" type="text/css">
    <link href="/user/css/owl.transitions.css" rel="stylesheet" type="text/css">
    <link href="/user/css/magnific-popup.css" rel="stylesheet" type="text/css">
	<link href="/user/css/jquery.countdown.css" rel="stylesheet" type="text/css">
    <link href="/user/css/style.css" rel="stylesheet" type="text/css">

    <!-- color scheme -->
    <link id="colors" href="/user/css/colors/scheme-01.css" rel="stylesheet" type="text/css">
	<link href="/user/css/coloring.css" rel="stylesheet" type="text/css">

    <!-- RS5.0 Stylesheet -->
    <link href="revolution/css/settings.css" rel="stylesheet" type="text/css">
    <link href="revolution/css/layers.css" rel="stylesheet" type="text/css">
    <link href="revolution/css/navigation.css" rel="stylesheet" type="text/css">
    <link href="/user/css/rev-settings.css" rel="stylesheet" type="text/css">


</head>




<body>
      
    <div id="wrapper">
        <!-- header begin -->
        <header class="header-s1">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="header-row">
                            <div class="header-col left">
                                <!-- logo begin -->
                                <div id="logo">
                                    <!-- <a href="index.html"><img alt="" class="logo" src="/user/images/logo-light.png"> <img alt="" class="logo-2" src="images/logo-dark.png"></a> -->
                                    <a href="/"><img width="180px" alt="" class="logo" src="/user/images/logo-light.png"> <img alt="" width="120px" style="margin-left: -50px;" class="logo-2" src="/user/images/logo-dark.png"></a>
                                    <!-- <a href="index.html"><span class="logo" style="color:aliceblue; font-size: large;">java兴趣社</span><span class="logo-2" style="color:black; font-size:medium;">java兴趣社</span></a> -->
                                </div>
                                <!-- logo close -->
                            </div>
                            <div class="header-col mid">
                                <!-- mainmenu begin -->
                                <ul id="mainmenu">
                                    <li><a href="/">首页</a>
										<ul>
                                            <li><a href="/#section-news">社团活动</a></li>
                                            <li><a href="/#condition">最新动态</a></li>
                                            <li><a href="/#section-features">社团部门</a></li>
                                            <li><a href="#">最新活动<span>New</span></a></li>
                                        </ul>
									</li>
                                    <li><a href="/match"> 比赛 <span>New</span></a>
                                        <ul>
                                            <li><a href="/match/#">最新比赛<span>NEW</span></a></li>
                                            <li><a href="/match">往届精彩</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="/asssociations">社团</a></li>
                                    <li><a href="/#footer">关于我们</a></li>
                                    <li><a href="/message">留言</a></li>
                                    <li><a href="#">敬请期待</a>
                                        <ul>											
                                            <li><a href="#">1</a></li>
											<li><a href="#">2</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="col-right">
                                    <a class="btn-custom" href="/login"><i class="fa fa-lock"></i>  登录</a>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <!-- small button begin -->
                        <span id="menu-btn"></span>
                        <!-- small button close -->

                    </div>
                </div>
            </div>
        </header>
        <!-- header close -->
        <!-- content begin -->
        <div class="no-bottom no-top" id="content">
            <div id="top"></div>
            <!-- revolution slider begin -->
            <section aria-label="section-slider" class="fullwidthbanner-container" id="section-slider">
                <div id="revolution-slider">
                    <ul>
                        <li data-masterspeed="1500" data-slotamount="10" data-transition="fade">
                            <!--  BACKGROUND IMAGE -->
                            <img alt="" class="rev-slidebg" data-bgparallax="15" data-bgposition="center center" data-duration="20000" data-ease="Power1.easeOut" data-kenburns="off" data-lazyload="/user/images/slider/1.png" data-no-retina="" data-offsetend="0 0" data-offsetstart="0 0" data-rotateend="0" data-rotatestart="0" data-scaleend="100" data-scalestart="110" src="/user/images/slider/1.png">

                            <div class="tp-caption custom-font-1" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1000" data-transform_in="y:-100px;opacity:0;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:-20;s:500;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="20" data-y="230">
                                青岛大学
                            </div>
                            <div class="tp-caption custom-font-2" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="700" data-transform_in="y:-100px;opacity:0;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:-20;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="0" data-y="center">
                                JAVA社团 21 纳新啦
                            </div>
                            <div class="tp-caption tp-text text-left" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1300" data-transform_in="y:100px;opacity:0;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:30;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="20" data-y="350">
                                <a class="btn-slider" href="#">期待你的加入</a>
                            </div>
                            <div class="tp-caption tp-text text-left" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1500" data-transform_in="y:0;s:0;opacity:0;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:30;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="600" data-y="center">
                                <img src="/user/images/slider/half-circle.png" alt="">
                            </div>
                            <div class="tp-caption tp-text text-left" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1600" data-transform_in="y:0;rZ:-180;opacity:0;0:100;s:3200;e:Power2.easeOut;" data-transform_out="opacity:0;y:30;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="580" data-y="373">
                                <img src="/user/images/slider/line.png" alt="">
                            </div>
                        </li>

                        <li data-masterspeed="1500" data-slotamount="10" data-transition="fade">
                            <!--  BACKGROUND IMAGE -->
                            <img alt="" class="rev-slidebg" data-bgparallax="15" data-bgposition="center center" data-duration="20000" data-ease="Power1.easeOut" data-kenburns="off" data-lazyload="/user/images/slider/2.png" data-no-retina="" data-offsetend="0 0" data-offsetstart="0 0" data-rotateend="0" data-rotatestart="0" data-scaleend="100" data-scalestart="110" src="/user/images/slider/1.png">

                            <div class="tp-caption custom-font-1" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1000" data-transform_in="y:-100px;opacity:0;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:-20;s:500;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="20" data-y="230">
                                我们用
                            </div>
                            
                            <!-- 加阴影   -->
                            <div class="tp-caption custom-font-2" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="700" data-transform_in="y:-100px;opacity:0;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:-20;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="20" data-y="center">
                                 执着的灯光点亮 , 每一个沉静的夜
                            </div>
                            <div class="tp-caption tp-text text-left" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1300" data-transform_in="y:100px;opacity:0;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:30;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="20" data-y="350">
                                <a class="btn-slider" href="#">期待你的加入</a>
                            </div>
                            <div class="tp-caption tp-text text-left" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1500" data-transform_in="y:0;s:0;opacity:0;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:30;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="550" data-y="center">
                                <img src="/user/images/slider/map.png" alt="">
                            </div>
                            <div class="tp-caption tp-text text-left" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1600" data-transform_in="y:100;opacity:0;0:100;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:30;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="690" data-y="360">
                                <img src="/user/images/slider/marker.png" alt="">
                            </div>

                            <div class="tp-caption tp-text text-left" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1700" data-transform_in="y:100;opacity:0;0:100;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:30;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="585" data-y="190">
                                <img src="/user/images/slider/marker.png" alt="">
                            </div>

                            <div class="tp-caption tp-text text-left" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1800" data-transform_in="y:100;opacity:0;0:100;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:30;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="785" data-y="215">
                                <img src="/user/images/slider/marker.png" alt="">
                            </div>

                            <div class="tp-caption tp-text text-left" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="1900" data-transform_in="y:100;opacity:0;0:100;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:30;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="920" data-y="250">
                                <img src="/user/images/slider/marker.png" alt="">
                            </div>

                            <div class="tp-caption tp-text text-left" data-height="none" data-responsive_offset="on" data-splitin="none" data-splitout="none" data-start="2000" data-transform_in="y:100;opacity:0;0:100;s:800;e:Power2.easeOut;" data-transform_out="opacity:0;y:30;s:700;e:Power2.easeInOut;" data-whitespace="nowrap" data-width="none" data-x="980" data-y="345">
                                <img src="/user/images/slider/marker.png" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
            <br>


            <section id="section-highlight" class="relative pos-top no-top mt-60 no-bg">

                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 mb-sm-30">
                            <div class="feature-box-type-1 hover">
                                <i class="icon-ribbon"></i>
                                <div class="text">
                                    <h3>项目开发</h3>
                                    <br><br>
                                    工作室有真实的开发机会，在项目开发中磨练自己，提升技术。
                                    <br>
                                    <br><br><br><br>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-sm-30">
                            <div class="feature-box-type-1">
                                <i class="icon-speedometer"></i>
                                <div class="text">
                                    <h3>授课解惑</h3>
                                    <br><br>
                                   每周开展技术课程，易途资深讲师吴威老师现场传授编程技巧
                                   <br><br><br><br><br>
                                </div>
                            </div>
                        </div>
                       

                        <div class="col-lg-3 col-md-6 mb-sm-30">
                            <div class="feature-box-type-1 hover">
                                <i class="icon-alarmclock"></i>
                                <div class="text">
                                    <h3>授课内容</h3>
                                   从Java基础到Java Web部分，包括工作中常用的SSM框架、JavaScipt、数据库、BootStrap等，另会根据同学们的需求开展特殊课程。满足你对Java编程的一切需求。
                                   
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-6 mb-sm-30">
                            <div class="feature-box-type-1 ">
                                <i class="icon-alarmclock"></i>
                                <div class="text">
                                    <h3>团建活动</h3>
                                    <br>
                                    <br>
                                   别墅轰趴、海钓、 滑雪、卡丁车、王者荣耀大赛等一些列眼花缭乱活动。给你不一样的大学生活体验！
                                   <br><br><br>
                            </div>
                        </div>
                    </div>
                </div>
            </section>


			<section id="condition" class="no-top no-bottom text-light" data-bgimage="url(/user/images/background/10.png)" data-stellar-background-ratio=".2">
                <br><br>
                <div class="container">
					<div class="row">
						<div class="col-md-6 offset-md-3 text-center">
							<h4 style="color: white;">LATEST DYNAMIC</h4>
							<h2 style="color: white">最新动态</h2>
                            <p style="color: whitesmoke;">
                                公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
                                公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
                                公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容    
                            </p>
							<div class="spacer-20"></div>
						</div>
                        
                        

						<!-- feature box begin -->
                        <div class="col-md-4 col-sm-6 feature-box mb40">
                            <div class="box-icon-simple left" style="margin: 10px; color: gray; background-color: white; padding: 20px; border-radius: 10px;" >
                                <span class="num">1</span>
                                <div class="text">
                                    <h3 style="color: gray;">Select Layout</h3>
                                    动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态
                                </div>
                            </div>
                        </div>
                        <!-- feature box close -->

                        <!-- feature box begin -->
                        <div class="col-md-4 col-sm-6 feature-box mb40">
                            <div class="box-icon-simple left" style="margin: 10px; color: gray; background-color: white; padding: 20px; border-radius: 10px;" >
                                <span class="num">2</span>
                                <div class="text">
                                    <h3 style="color: gray;">Select Layout</h3>
                                    动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态
                                </div>
                            </div>
                        </div>
                        <!-- feature box close -->

                        <!-- feature box begin -->
                        <div class="col-md-4 col-sm-6 feature-box mb40">
                            <div class="box-icon-simple left" style="margin: 10px; color: gray; background-color: white; padding: 20px; border-radius: 10px;" >
                                <span class="num">3</span>
                                <div class="text">
                                    <h3 style="color: gray;">Select Layout</h3>
                                    动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态动态
                                </div>
                            </div>
                        </div>
                        <!-- feature box close -->




                        
					</div>
				</div>
			</section>


            <section id="section-news">
                <div class="container">
                    <div class="row">
                        <div class="col text-center">
                            <h2><span class="uptitle id-color">Colorful activities</span>丰富多彩的社团活动</h2>
                            <div class="spacer-20"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="owl-carousel owl-theme" id="blog-carousel">


                                <div class="bloglist item">
                                    <div class="post-content">
                                        <div class="post-image">
                                            <a href="picture.html"><img alt="" src="/picture/images/img_30.jpg"></a>
                                            <div class="post-info">
                                                <div class="inner" style="text-align: center;">
                                                    <span class="post-date">点击查看更多</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="post-text">
                                            <h3><a href="picture.html">How to Choose Good Hosting</a></h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bloglist item">
                                    <div class="post-content">
                                        <div class="post-image">
                                            <a href="picture.html"><img alt="" src="/picture/images/img_2.jpg"></a>
                                            <div class="post-info">
                                                <div class="inner" style="text-align: center;">
                                                    <span class="post-date">点击查看更多</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="post-text">
                                            <h3><a href="picture.html">How to Choose Good Hosting</a></h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        </div>
                                    </div>
                                </div>                                
                                
                                <div class="bloglist item">
                                    <div class="post-content">
                                        <div class="post-image">
                                            <a href="picture.html"><img alt="" src="/picture/images/img_3.jpg"></a>
                                            <div class="post-info">
                                                <div class="inner" style="text-align: center;">
                                                    <span class="post-date">点击查看更多</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="post-text">
                                            <h3><a href="picture.html">How to Choose Good Hosting</a></h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </section>





            <section id="section-banner" class="no-bottom no-top img-fluid bg-gradient-to-right text-light relative pos-top">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-4 d-none d-lg-block d-xl-block  text-center">
                            <img class="relative img-fluid mt-60" src="/image/back_index.gif" height="100%" alt="">
                        </div>

                        <div class="col-lg-4 col-md-6">
							<div class="p-sm-30 pb-sm-0 mb-sm-0">
                                <h2>待定</h2>
                                asaaaaaaaaaaaaaaaaaaaaaaaa <br> a<br>b <br>c <br>

							</div>
                        </div>

                        <div class="col-lg-4 col-md-6">
							<div class="p-sm-30">
                            <p class="lead">所以---</p>
                            <div class="spacer-half"></div>
                            <a class="btn-custom" href="#">加入我们吧</a>
							</div>
                        </div>
                    </div>
                </div>
            </section>




            
            <section id="section-features">
                <div class="container">
                    <div class="row">
                        <div class="col-md text-center">
                            <h2><span class="uptitle id-color">Department</span>社团部门</h2>
                            <div class="spacer-20"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md col-sm-6 mb-sm-30">
                            <div class="feature-box-type-2">
                                <i class="icon-alarmclock"></i>
                                <h4>技术部</h4>
                            </div>
                        </div>

                        <div class="col-md col-sm-6 mb-sm-30">
                            <div class="feature-box-type-2">
                                <i class="icon-profile-male"></i>
                                <h4>宣传部</h4>
                            </div>
                        </div>

                        <div class="col-md col-sm-6 mb-sm-30">
                            <div class="feature-box-type-2">
                                <i class="icon-refresh"></i>
                                <h4>秘书处</h4>
                            </div>
                        </div>

                        <div class="col-md col-sm-6 mb-sm-30">
                            <div class="feature-box-type-2">
                                <i class="icon-upload"></i>
                                <h4>外联部</h4>
                            </div>
                        </div>
                        <div class="col-md col-sm-6 mb-sm-30">
                            <div class="feature-box-type-2">
                                <i class="icon-layers"></i>
                                <h4>文艺部</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="section-fun-facts" class="pt60 pb60 text-light bg-gradient-to-right">
                <div class="container">

                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="de_count">
                                <h3 class="timer" data-to="1813" data-speed="3000">0</h3>
                                <span>成立天数</span>
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-6">
                            <div class="de_count">
                                <h3 class="timer" data-to="1567" data-speed="3000">0</h3>
                                <span>累计社团成员</span>
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-6" data-wow-delay=".5s">
                            <div class="de_count">
                                <h3 class="timer" data-to="753" data-speed="3000">0</h3>
                                <span>开展课程</span>
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-6">
                            <div class="de_count">
                                <h3 class="timer" data-to="3" data-speed="3000">0</h3>
                                <span>专业指导老师</span>
                            </div>
                        </div>
                    </div>

                </div>
            </section>


            <section id="section-faq">
                <div class="container">
                    <div class="row">
                        <div class="col text-center">
                            <h2><span class="uptitle id-color">WELCOME TO JOIN US</span>部门详细职责</h2>
                            <div class="spacer-20"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-10 offset-md-1">
                            <div class="accordion">
                                <div class="accordion-section">
                                    <div class="accordion-section-title" data-tab="#accordion-1">
                                        技术小白可以加技术部吗？
                                    </div>
                                    <div class="accordion-section-content" id="accordion-1">
                                        <p>加入社团技术部你可以从默默无闻的小白，逐渐成为身怀“绝技”的技术大佬，不用担心没有基础，只要想学，热情的学长学姐还有专业的指导老师会教授你们所感兴趣的所有技能！ <br>
                                        写JAVA程序是技术，修理电脑也是技术，打ACM蓝桥杯需要技术，驰骋峡谷也需要技术！社团技术部带你全面发展。你想要的语言我们都有。</Canvas>
                                        </p>
                                    </div>
                                    <div class="accordion-section-title" data-tab="#accordion-2">
                                        宣传部我可以收获到什么？
                                    </div>
                                    <div class="accordion-section-content" id="accordion-2">
                                        <p>当你看到这段文字的时候，宣传部的学姐会很欣慰，自己设计的社团官网已经可以投入使用了（此处感谢社团培养）！从配色到布局，从构思到文案无不包含着宣传部学姐们的心血。因为热爱着这个社团，他包容着我们的任性和不足，教会我们成长，发自内心的想通过自己的努力让社团越来越壮大。 <br> 那种相见恨晚的归属感，相信我，你也一定会有的。<br> ps ai 页面前端设计 音频视频剪辑 摄影素养  我们全面培养 </p>
                                    </div>
                                    <div class="accordion-section-title" data-tab="#accordion-3">
                                        秘书处为什么叫秘书处？
                                    </div>
                                    <div class="accordion-section-content" id="accordion-3">
                                        <p>严谨，追求完美，做事善始善终，这就是人们对秘书处小伙伴们的日常夸赞。 <br>  他们总是在活动中细心的照顾到每一个人。是促进各项工作有条不紊进行、保障各部门高效运转的重要组成部分。  <br> 也是社团重要的沟通枢纽，协助指导老师完成社团活动，社团所属物品与日常事务的管理。  <br> 社团就是我的家，我是社团小管家。</p>
                                    </div>
                                    <div class="accordion-section-title" data-tab="#accordion-4">
                                       外联部是需要我跟谁打交道嘛？
                                    </div>
                                    <div class="accordion-section-content" id="accordion-4">
                                        <p>  “假如人际沟通能力也是同糖或咖啡一样的商品的话，我愿意付出比太阳底下任何东西都珍贵的价格购买这种能力”<br>石油大王洛克菲勒曾这样说，可见沟通的重要性。有效的沟通对于一个人的学习、生活、工作有越来越重要的影响。 <br>  外联部顾名思义对外联络，主要负责社团与社团之间，老师和同学之间，社团和其他学生组织之间的友好联系，互帮互助，更好的开展社团活动。<br>能力不是等来的，是锻炼出来的，你准备好了吗？<br> <br>里面的人个个都是人才，说话又好听，超喜欢在里面的感觉啦－联格瓦拉
                                            人尽皆知Java社作为青岛大学第一大社!又怎能没有其门面担当呢，没错就是我们!外联部!我们与他社骨干推杯换盏，高谈阔论共商社团大事，在社团活动中我们统筹兼备，将社与社之间紧密相连，虽然我们表面光鲜亮丽，可是我们背地里却有着不为人知的光鲜亮丽，不说了谈“生意”去了 </p>
                                    </div>
                                    <div class="accordion-section-title" data-tab="#accordion-5">
                                        作为一个技术性社团为什么需要文艺部？
                                    </div>
                                    <div class="accordion-section-content" id="accordion-5">
                                        <p>“Java兴趣社从来都不是一个只有技术的社团！”这句话已经听一届又一届学长学姐感慨过了，也确实只有你参与进来亲身体会后才会社团生活的丰富多彩。</p>
                                    </div>
                                    <div class="accordion-section-title" data-tab="#accordion-6">
                                       社团是一个大家庭，不要纠结，哪个部门都很棒！
                                    </div>
                                    <div class="accordion-section-content" id="accordion-6">
                                        <p>这里有未曾想过的快乐团结，在这里，既有帅气贴心的学长，还有美丽温柔可人的学姐，还有魅力与技术并存的指导老师（lǎo gē）！我们用执着的灯光点亮每一个沉静的夜！
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>





            </div>
            <!-- content close -->

            <!-- footer begin -->
            <footer id="footer">
                <div class="container">
                    <div class="row">

                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-4 col-xs-4">
                                    <div class="widget">
                                        <h5>Contact</h5>
                                        <div class="tiny-border"></div>
                                        <!-- <ul>
                                            <li><a href="#">地址： </a></li>
                                            <li><a href="#"></a></li>
                                            <li><a href="#">Cloud Hosting</a></li>
                                            <li><a href="#">WordPress Hosting</a></li>
                                            <li><a href="#">Email Hosting</a></li>
                                            <li><a href="#">CMS Hosting</a></li>
                                            <li><a href="#">Ecommerce Hosting</a></li>
                                            <li><a href="#">Website Builder</a></li>
                                        </ul> -->
                                        <ul>
                                            <li>地址 ： <a target="_blank" href="https://j.map.baidu.com/b1/mKe">山东省青岛市崂山区青岛大学浮山校区西院快递服务大厅北 10m</a> </li>
                                            <li>社长电话 ： 17864202301 （丁宇轩） </li>
                                            <!-- <li><a href=""></a></li> -->
                                            <li>邮箱 ： 1142584965@qq.com </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-md-4 col-xs-4">
                                    <div class="widget">
                                        <h5>Instructor</h5>
                                        <div class="tiny-border"></div>
                                        <ul>
                                            数据科学与软件工程学院 <br> 特聘教师：
                                            <li> <p href="#" style="color: gainsboro; padding: 0; margin:0;" class="btn btn-sm wls">王老师(点击扫码加微信)</p></li>
                                            <li> <p href="#" style="color: gainsboro; padding: 0; margin:0" class="btn btn-sm lls">刘老师(点击扫码加微信)</p></li>
                                            <li> <p href="#" style="color: gainsboro; padding: 0; margin:0" class="btn btn-sm gls">高老师(点击扫码加微信)</p></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-md-4 col-xs-4">
                                    <div class="widget">
                                        <h5>Family</h5>
                                        <div class="tiny-border"></div>
                                        <ul>
                                            <li><a href="#">社团21迎新群</a></li>
                                            <li><a href="#">寒暑假听课群</a></li>
                                            <li><a href="#">21比赛QQ群</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="widget">
                                <a href="index.html">
                                    <img  alt="" class="logo" src="/user/images/logo-light.png" style="margin-left:-122px;">
                                </a>
                                <div class="spacer-20"></div>
                                <p> 
                                    我们用执着的灯光点亮，每一个沉静的夜。 <br>
                                    青岛大学 
                                    <span style="border: black solid; color: #ffc616;">最</span>
                                    <span style="border: black solid; color: #ffc616;">最</span>
                                    <span style="border: black solid; color: #ffc616;">最</span> 
                                    专业的技术性社团 <br>
                                    青岛大学 JAVA兴趣社团 为同学们更好的学习JAVA语言而成立的专业性社团。<br>
                                    青岛大学java兴趣社团成立于2013年， <br> 由资深java软件开发工程师和、 
                                    java讲师带队，<br> 为同学们提供专业的编程环境。
                                </p>
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-6 sm-text-center mb-sm-30">
                            <div class="mt10">&copy; Copyright 2020 - Uhost by Designesia</div>
                        </div>

                        <div class="col-md-6 text-md-right text-sm-left">
                            <div class="social-icons">
                                <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
                                <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
                                <a href="#"><i class="fa fa-linkedin fa-lg"></i></a>
                                <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
                                <a href="#"><i class="fa fa-rss fa-lg"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                 <!-- display: none; -->
                 <div class="ewm_box" style="display: none;">
                <!-- <img src="/user/images/contact/1.jpg" width="100%" height="100%" alt="">   -->
                </div>
            </footer>
            <!-- footer close -->

            <div id="preloader">
                <div class="spinner">
                    <div class="bounce1"></div>
                    <div class="bounce2"></div>
                    <div class="bounce3"></div>
                </div>
            </div>
        </div>		
		
		<div id="selector">
			<span class="opt tc1" data-color="scheme-01"></span>
			<span class="opt tc2" data-color="scheme-02"></span>
			<span class="opt tc3" data-color="scheme-03"></span>
			<span class="opt tc4" data-color="scheme-04"></span>
		</div>



       
        <!-- Javascript Files
    ================================================== -->
        <script src="/user/js/jquery.min.js"></script>
        <script src="/user/js/bootstrap.min.js"></script>
        <script src="/user/js/wow.min.js"></script>
        <script src="/user/js/jquery.isotope.min.js"></script>
        <script src="/user/js/easing.js"></script>
        <script src="/user/js/owl.carousel.js"></script>
        <script src="/user/js/validation.js"></script>
        <script src="/user/js/jquery.magnific-popup.min.js"></script>
        <script src="/user/js/enquire.min.js"></script>
        <script src="/user/js/jquery.stellar.min.js"></script>
        <script src="/user/js/jquery.plugin.js"></script>
        <script src="/user/js/typed.js"></script>
        <!-- <script src="/user/js/app.js"></script> -->
		<script src="/user/js/jquery.countTo.js"></script>
        <script src="/user/js/jquery.countdown.js"></script>
        <script src="/user/js/designesia.js"></script>
        
        <!-- RS5.0 Core JS Files -->
        <script src="revolution/js/jquery.themepunch.tools.min.js?rev=5.0"></script>
        <script src="revolution/js/jquery.themepunch.revolution.min.js?rev=5.0"></script>

		<!-- RS5.0 Extensions Files -->
        <script src="revolution/js/extensions/revolution.extension.video.min.js"></script>
        <script src="revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
        <script src="revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
        <script src="revolution/js/extensions/revolution.extension.navigation.min.js"></script>
        <script src="revolution/js/extensions/revolution.extension.actions.min.js"></script>
        <script src="revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
        <script src="revolution/js/extensions/revolution.extension.migration.min.js"></script>
        <script src="revolution/js/extensions/revolution.extension.parallax.min.js"></script>
        <!-- current page only scripts -->
        
        <!-- 弹窗 插件  start-->
        <script src="/user/js/layer/layer.js"></script>
        <script src="/user/js/bont_it.js"></script>
        <!-- 弹窗 插件  end-->

        
        <script>
            jQuery(document).ready(function() {
                // revolution slider
                jQuery("#revolution-slider").revolution({
                    sliderType: "standard",
                    sliderLayout: "fullwidth",
                    delay: 5000,
                    navigation: {
                        arrows: {
                            enable: true
                        }
                    },
                    parallax: {
                        type: "mouse",
                        origo: "slidercenter",
                        speed: 2000,
                        levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50],
                    },
                    spinner: "off",
                    gridwidth: 1140,
                    gridheight: 600,
                    disableProgressBar: "on"
                });
            });
        </script>



<!-- 回到顶部 -->
    <a href="javascript:;" id="btn" title="回到顶部" 
    style="width:40px;
    height:40px;
    position:fixed;
    z-index: 100000;
    right:5%;
    bottom:30px;
    display:none;"> 
        <img src="/image/totap1.png" width="50px" alt="">     
    </a>
<script>
    window.onload = function() {
        var obtn = document.getElementById('btn');
        var clientHeight = document.documentElement.clientHeight;
        var timer = null;
        var isTop = true;
    
        window.onscroll = function() {
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (osTop >= clientHeight) {
                obtn.style.display = 'block';
            } else {
                obtn.style.display = 'none';
            }
    
            if (!isTop) {
                clearInterval(timer);
            }
            isTop = false;
        }
    
        //给其添加点击事件
        obtn.onclick = function() {
            //写定时器,动画效果的函数setInterval(),放一个匿名函数function()
            timer = setInterval(function() {
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                var ispeed = Math.floor(-osTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                isTop = true;
                // console.log(osTop - ispeed);
                if (osTop == 0) {
                    clearInterval(timer);
                }
            }, 30);
    
        }
    }
    </script>

    
</body>

</html>